<!--
Author: Ray-Eldath
refer to:
 - https://github.com/theme-next/hexo-theme-next/blob/master/source/js/src/utils.js
 - https://jingyan.baidu.com/article/b2c186c83ec846c46ef6ff80.html
 - http://www.bkjia.com/jQuery/449205.html
-->
<style media="screen">
  .scroll {
    z-index: 10000;
    display: none;
    width: 56px;
    height: 24px;
    background: #222;
    color: #fff;
    line-height: 24px;
    text-align: center;
    position: fixed;
    right: 30px;
    bottom: 30px;
    cursor: pointer;
    font-size: 14px;
  }
</style>
<div class="scroll">
  <i class="fa fa-arrow-up"></i>
  <span class="scrollpercent"></span><span> %</span>
</div>

<script src="{{ site.baseurl }}/assets/js/util.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    if (utils.isMobile()) {
      $('.scroll').hide();
      return;
    }
    $(window).scroll(function() {
      let scrollValue = $(window).scrollTop();

      var scrollPercentRounded = Math.round((scrollValue / utils.getContentVisibilityHeight()) * 100);
      var scrollPercentMaxed = (scrollPercentRounded > 100) ? 100 : scrollPercentRounded;

      $('.scrollpercent').html(scrollPercentMaxed);
      scrollValue > 100 ? $('.scroll').fadeIn() : $('.scroll').fadeOut();
    });

    $('.scroll').click(function() {
      $('html, body').animate({
        scrollTop: 0
      }, 300);
    })
  })
</script>
